<template>
    <div class="category">
        <template v-for="(item,index) in data.categories">
            <hr v-if="index"/>
            <router-link :to="'/product?category='+item.code"><span>{{item.name}}</span><span>{{item.english}}</span>
            </router-link>
        </template>
    </div>
</template>
<script>
    export default {
        props: {
            value: {ype: Array, default: []}
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
        methods: {}
    }

</script>
<style>
    .category {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 3rem;
    }

    .category a {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 2rem;
    }

    .category span {
        text-transform: uppercase;
    }

    .category a span:last-child {
        font-size: 1.2rem;
    }

    .category hr {
        display: block;
        height: 12rem;
        width: 1px;
        background-color: #c2c1c1;
        margin: 0 4rem;
    }

    @media screen and (max-width: 40rem) {
        .category{
            display: none;
        }
    }
</style>
